<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<title>充值</title>
		<style media="screen">
			input {
  display: inline-block;
  vertical-align: middle;
  /* 当成为行内块元素时它就可以垂直居中了 */
  width: 15px;
  height: 15px;
  -webkit-appearance: none;
  /* 清除原有的样式 */
  background-color: transparent;
  border: 0;
  outline: 0 !important;
  /* 去掉点击后外面可能会出现的蓝框 */
  line-height: 15px;
  color: #d8d8d8;
  }
  input:after {
  /* //在input的内容之后插入新内容 */
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  text-align: center;
  line-height: 8px;
  font-size: 10px;
  color: #fff;
  border: 4px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
  /* 规定两个并排的带边框的框 */
  }
  input:checked:after {
  /* 选中之后的样子 */
  content: "L";
  transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
  /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
  括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
  -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
  border-color: #3f80cc;
  background-color: #3f80cc;
  }
  </style>
	</head>
	<body>
		<div id="app">
			<div id="public-header" style="padding-bottom:1.5rem;">
				<div id="statusbar"></div>
				<header class="public-header">
					<div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
					<div class="public-header-title">充值</div>
				</header>
			</div>
			<div class="recharge-body">
				<div class="recharge-body-list flex wrap">
					<div class="recharge-body-list-son" v-for="(item,index) in list" :class="{hover:index==num}" @click="rcharge(item.id,index,item.integral,item.price)">
						<div class="recharge-body-list-money"><span style="font-size:0.28rem;">￥</span>{{item.price}}</div>
						<div class="recharge-body-list-zensong">赠送{{item.score}}点</div>
						<div class="recharge-body-list-label" v-if="item.status==1">推荐</div>
					</div>
				</div>
				<!-- <div  class="recharge-body-input"><input @click="custmoney" v-model="custmoneys" type="number" placeholder="自定义充值金额"></div> -->
				<p>注：每1元送1积分，积分用于刷新广告排名</p>
			</div>
			<div style="width:100%;margin:auto 0;height:1.85rem;">
				<!-- <div style="width:50%;float:left;">
        <div style="clear: both;"></div>
        <div style="color:#000;font-size:0.30rem;text-align:center;height:0.45rem;line-height:0.45rem;margin-left:40%;margin-right:9%;">
           <input type="radio" name="pay" v-model="way" value="1"  /><span>微信支付</span>
        </div>
        <img style="width:40%;height:100%;margin-left:45%;margin-right:9%;" src="../../image/public/wechat.png" alt="">
      </div> -->
				<div style="width:50%;float:left;">
					<div style="clear: both;"></div>
					<div style="color:#000;font-size:0.30rem;text-align:center;height:0.45rem;line-height:0.45rem;margin-left:9%;margin-right:20%;">
						<input type="radio" name="pay" v-model="way" value="2" /><span>支付宝支付</span>
					</div>
					<img style="width:40%;height:100%;margin-left:14%;margin-right:20%;" src="../../image/public/alipay.png" alt="">
				</div>
			</div>
			<div class="recharge-btn" @click="okcustm">确认充值</div>
		</div>
		<div class="public-progress" style="z-index:9;">
			<img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/jsencrypt.js"></script>
	<script src="../../script/fastclick.js"></script>

	<script>
		var vm;
		var mescroll;
		apiready = function() {
			api.removeLaunchView();
			setBar("statusbar");
			setFont(750);
			startVue();
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 2000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					gdtt: ['50', '100', '200', '300', '500', '1000'],
					num: 0,
					list: [],
					integral: '',
					price: '',
					add: 0,
					custmoneys: '',
					type: '2',
					way: '2',
					id:'1'
				},
				created: function() {
					this.recharge();
				},
				methods: {
					recharge: function() {
						api.ajax({
							url: apiUrl + '/api/index/rechargesetting',
							method: 'post',
							data: {
								values: {},
							}
						}, function(ret, err) {
							if (ret.code == 1) {
								vm.list = ret.data;
							} else {
								vm.list = ret.data;
							}
						});
					},
					//选择充值金额
					rcharge: function(id,index, integral, price) {
						this.num = index;
						vm.id=id;
						vm.price = price;
						vm.integral = integral;
					},
					//自定义金额
					custmoney: function() {
						vm.num = null;
					},
					//确认充值
					okcustm: function() {
						vm.integral = vm.list[vm.num]['integral'];
						vm.price = vm.list[vm.num]['price'];
						if (vm.way == "1") {
							//微信支付
							if (vm.price == "") {
								api.toast({
									msg: '充值金额不能为空',
									duration: 2000,
									location: 'middle'
								});
								return;
							}
							if (vm.integral == "") {
								api.toast({
									msg: '赠送积分不能为空',
									duration: 2000,
									location: 'middle'
								});
								return;
							}
							api.ajax({
								url: apiUrl + '/api/Pay/AppZhifu',
								method: 'post',
								data: {
									values: {
										fraction: post_en(vm.integral),
										payprice: post_en(vm.price),
										uid: post_en($api.getStorage('uid')),
										content: '充值' + vm.price + '元赠送积分' + vm.integral,
										types: 2,
									},
								}
							}, function(ret, err) {
								if (ret.status) {
									var wxPayPlus = api.require('wxPayPlus');
									wxPayPlus.payOrder({
										apiKey: ret.data.apiKey,
										orderId: ret.data.orderId,
										mchId: ret.data.mchId,
										nonceStr: ret.data.nonceStr,
										timeStamp: ret.data.timeStamp,
										package: ret.data.package,
										sign: ret.data.sign
									}, function(ret, err) {
										if (ret.status) {
											//支付成功
											alert(ret.result);
											api.execScript({
												name: 'personal',
												script: 'vm.getUserInfo()'
											});
										} else {
											alert(err);
										}
									});
								} else {
									alert(JSON.stringify(err));
								}
							});
						} else {
							api.ajax({
								url: apiUrl + '/api/user/pay',
								method: 'post',
								data: {
									values: {
										source_id:vm.id,
										type: 2,
										token: $api.getStorage('token'),
										payment_code: 'alipay',
										money: vm.price,
										types: 1,
									},
								}
							}, function(ret, err) {
								console.log(JSON.stringify(ret))
								if (ret.code == 1) {
									var aliPayPlus = api.require('aliPayPlus');
									aliPayPlus.payOrder({
										orderInfo: ret.data.data
									}, function(ret, err) {
										if (ret.code == 9000) {
											alert('支付成功');
											api.execScript({
												name: 'personal',
												script: 'vm.getUserInfo()'
											});
										} else if (ret.code == 8000) {
											alert('正在处理中，支付结果未知（有可能已经支付成功），请查询商户订单列表中订单的支付状态');
										} else if (ret.code == 4000) {
											alert('订单支付失败');
										} else if (ret.code == 5000) {
											alert('重复请求');
										} else if (ret.code == 6001) {
											alert('用户中途取消支付操作');
										} else if (ret.code == 6002) {
											alert('网络连接出错');
										} else if (ret.code == 6004) {
											alert('支付结果未知（有可能已经支付成功），请查询商户订单列表中订单的支付状态');
										}
									});
								} else {
									alert(JSON.stringify(err));
								}
							});

						}
					},
				}
			})
		}
	</script>
</html>
